<template>
    <el-dialog v-model="OptionVisible.value" :destroy-on-close="destroyOnClose.value" :title="title.value" width="300" :before-close="handleClose">
        <slot></slot>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="UserOK">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref, toRefs, reactive } from 'vue'
let title = reactive({ value: "提示" });
let OptionVisible = reactive({ value: false });
let destroyOnClose = reactive({value:false})
const emit = defineEmits(['quit','userOk'])
defineExpose({
    OptionVisible,
    title
})
const Prop = defineProps([
    "title",
    "destroyOnClose"
])

if(Prop.destroyOnClose == true){
    destroyOnClose.value = true
}else{
    destroyOnClose.value = false;
}

if(Prop.title != undefined){
    title.value = Prop.title
}



const handleClose = () => {
    OptionVisible.value = false;
    emit('quit')
}
const UserOK = ()=>{
    emit('userOk')
}

</script>
<style scoped></style>